<template>
	<view>
		<view class="condition">
			<view>
				<text class="icon" id="up" @click="price('asc')">价格&#xe658;</text>
			</view>
			<view>
				<text class="icon" id="down" @click="price('desc')">价格&#xe65a;</text>
			</view>
		</view>
		<view class="outter">
			<view class="inner"  v-for="item in foodList" :key="item.foodId" @click="foodDetail(item.foodId)">
				<view class="proname">
					<text >{{item.foodName}}</text>
				</view>
				<view class="ima">
					<image  :src="item.img[0].url"></image>
				</view>
				<view class="price">
					<text >¥{{item.price}}</text>
				</view>
			</view>
			<!--每页展示6条,当商品的长度对6取余不等于0时说明,数据拉去完毕-->
			<view class="dibu" v-if="this.foodList.length % 6==0?false:true">
				<text>-----已 经 到 底-----</text>
			</view>
		</view>
		<!--回到顶部-->
		<view class="backTop" v-if="this.topLength>100" @click="goTop()">
			<text class="icon">&#xe604;</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				foodList:[],
				//当前商品类别id
				campId:0,
				foodName:'',
				pageIndex:1,
				condi:null,
				//与顶部距离
				topLength:null
			}
		},
		//进入页面加载
		onLoad(options) {
			this.campId=options.campId;
			this.getFoodList();
		},
		methods: {
			//发送请求获取列表
			getFoodList(){
				uni.request({
					url:this.webUrl+"selectAllFood?campId="+this.campId+"&pageIndex="+this.pageIndex+"&foodName="+this.foodName,
					success:(res)=>{
						this.foodList=[...this.foodList,...res.data.obj];
					},
					fail: (err) => {
						uni.showToast({
							title:"商品加载失败"
						})
					}
				})
			},
			//价格排序查询获取列表
			getFoodListByPrice(){
				uni.request({
					url:this.webUrl+"selectAllFood?campId="+this.campId+"&price="+this.condi+"&pageIndex="+this.pageIndex,
					success:(res)=>{
						this.foodList=[...this.foodList,...res.data.obj];
					},
					fail: (err) => {
						uni.showToast({
							title:"商品加载失败"
						})
					}
				})
			},
			//点击价格排序,condi为asc 或者desc  升序或降序
			price(condi){
				this.foodList=[];
				this.condi=condi;
				this.pageIndex=1;
				if(condi=='asc'){
					document.getElementById("up").style.color="rgb(212,145,5)";
					document.getElementById("down").style.color="white";
				}
				if(condi=='desc'){
					document.getElementById("down").style.color="rgb(212,145,5)";
					document.getElementById("up").style.color="white";
				}
				this.getFoodListByPrice();
			},
			//跳转详情
			foodDetail(foodId){
				uni.navigateTo({
					url:'/pages/foodDetail/foodDetail?foodId='+foodId
				})
			},
			//回到顶部
			goTop(){
				this.foodList=[];
				this.pageIndex=1;
				if(this.condi==null){
					this.getFoodList();
				}else{
					this.getFoodListByPrice();
				}
			}
		},
		//监测到底
		onReachBottom(){
			console.log("到底部了")
			this.pageIndex++;
			if(this.condi==null){
				this.getFoodList();
			}else{
				this.getFoodListByPrice();
			}
		},
		//监测与顶部的距离
		onPageScroll(e) {
			this.topLength=e.scrollTop;
		}
		
	}
</script>

<style lang="scss">
	page{
		background-color: rgb(220,220,220);
	}
	//顶部销量,价格
	.condition{
		width: 100%;
		height: 100rpx;
		background-color: rgb(70,70,70);
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		flex-direction: row;
		line-height: 100rpx;
		.icon{
			font-size: 35rpx;
			color: white;
		}
	}
	//动态渲染商品
	.outter{
		float: left;
		width: 750rpx;
		// height: 560rpx;
		background-color: rgb(220,220,220);
		// display: flex;
		// flex-wrap: wrap;
		// justify-content: space-between;
		// flex-direction: row;
		.inner{
			float: left;
			background-color: white;
			width: 330rpx;
			height: 500rpx;
			margin-top:30rpx ;
			margin-left: 30rpx;
			border-radius: 20rpx;
			.proname{
				overflow: hidden;
				width: 300rpx;
				height: 80rpx;
				font-size: 35rpx;
				margin-top: 20rpx;
				margin-left: 10rpx;
				line-height: 80rpx;
			}
			.ima{
				width: 100%;
				height: 330rpx;
				image{
					width: 100%;
					height: 100%;
					
				}
			}
			.price{
				margin-left: 30rpx;
				padding-top: 10rpx;
				color: rgb(148,102,102);
			}
		}
		.dibu{
			float: left;
			width: 100%;
			height: 70rpx;
			background-color:rgb(240,240,240);
			margin-top: 30rpx;
			line-height: 70rpx;
			text-align: center;
			font-size:30rpx ;
			color:rgb(148,102,102)
		}
	}
	.backTop{
		position: fixed;
		width: 80rpx;
		height: 80rpx;
		border-radius: 30rpx;
		left: 640rpx;
		top: 1150rpx;
		line-height: 80rpx;
		background-color: rgb(22,194,194);
		color: white;
		.icon{
			margin-left: 10rpx;
			font-size: 60rpx;
		}
	}
</style>
